<template>
	<view >
		<!-- <view class="status_bar"></view>
		<view class="header">
			<view class="back iconfont" @tap="backPage">&#xe8c8;</view>
			<view class="share iconfont" @tap="declick">&#xe613;</view>
		</view>
		<view class="clear_box02"></view> -->
		
		<swiper class="swiper_box" :autoplay="goods.fm_video?false:true" :circular="true" :interval="3000" :duration="200" indicator-dots="true" indicator-color="#4f4f4f" indicator-active-color="#4d726f">
			
				<swiper-item style="height: 100%;" v-if="goods.fm_video">
					<view class="swiper-item" style="height: 100%;">
					<video  :src="goods.fm_video" controls style="width: 100%;position: relative;"  controls='' ></video>
						<cover-view v-show="pupu_show || pupu_show1" style="position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);top: 0;
						left: 0;"></cover-view>
					</view>
				</swiper-item>
				<block v-if="goods.gallery != null" v-for="(item, index) in goods.gallery" :key="index">
				<swiper-item style="height: 100%;">
					<view class="swiper-item" style="height: 100%;">
						<image :src="item.image" mode="scaleToFill" @error="imgError(item.image)"></image>
						<!-- <view class="num_box">{{ index + 1 }}/{{ goods.gallery.length }}</view> -->
					</view>
				</swiper-item>
			
			</block>
		</swiper>
		
		<view class="title_box">{{goods.name}}</view>
		<view class="title_box title_box2" v-if="goods.js">{{goods.js}}</view>
		<view class="money_box" v-if='goods.pay_type==1 '>
			¥{{goods.price}}
	
		</view>
		<view class="money_box" v-if='goods.pay_type==2'>
			积分：{{goods.price}}
			
		</view>
		<!-- <view class="money_box" v-if='goods.pay_type==2'>
			￥{{ goods.price }}+助农劵
			
		</view> -->
		<!-- 	<view class="money_box" v-if="integral == true">
			999积分
			<view class="y_money">
				¥3099.00
				<view class="line"></view>
			</view>
		</view> -->
		<!-- <view class="coupon_box"><view class="text"></view></view> -->
		 <view class="message_box">
				<view class="message">运费：{{goods.yun}}</view>
				<view class="message">已售：{{goods.sales}}单</view>
				<view class="message">库存：{{goods.stock }}</view> 
				
		</view> 
		<view class="message_box2" v-if="goods.tg == 2">
			<view class="m2_txt1">拼团商品</view>
			<view class="m2_txt2" v-if="goods.tg_data.tg_num">还差<span style="font-size: 30rpx;font-weight: bold;">{{goods.tg_data.tg_num}}</span>人</view>
			<view class="m2_txt2" v-else>待开团</view>
			<view class="m2_txt3">
				<view style="font-size: 26rpx;">截止时间</view>
				<view v-if="goods.tg_data.tg_dq_date">{{goods.tg_data.tg_dq_date}}</view>
				<view v-else>-- : -- : --</view>
			</view>
		</view>









		<!-- 富文本 -->
		<view class="content_title"><label class="con_tit_txt">商品详情</label></view>
		<view class="content_box" v-if="select == 0">
			<!-- <rich-text class="fwb" :nodes="strings"></rich-text> -->
			<block v-if="goods.picture !=null " v-for="(item,index) in goods.picture" :key="index">
				<image class="fwb" :src="item.image" mode="widthFix"></image>
			</block>
		</view>
		<!-- <video v-if="goods.video" :src="goods.video" controls style="width: 100%;z-index: 1;"></video> -->
		<view class="content_box1" v-html="goods.description">

		</view>
		<!-- 富文本 -->



		<view class="footer">
			<view class="menu">
				<view class="bt" @tap="setCollect">
					<view class="icon iconfont" :class="collect? 'collectcolor' : ''">&#xe8ab;</view>
					<view class="text" :class="collect? 'collectcolor' : ''">收藏</view>
				</view>
				<!-- #ifndef APP-PLUS -->
				<button class="bt btn1" style="line-height: 5vw;overflow: visible;" @click="openPhone">
					<view class="icon iconfont" style="margin-top: 1.8vw;">&#xe621;</view>
					<view class="text">客服</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button class="bt btn1" style="line-height: 5vw;overflow: visible;" @click="openMeiQiaChatView">
					<view class="icon iconfont" style="margin-top: 1.8vw;">&#xe621;</view>
					<view class="text">客服</view>
				</button>
				<!-- #endif -->
			</view>
		<!-- 	<view class="menu" @tap="openCar" v-if="goods.type==99 && goods.pay_type==1">
				<view class="menu_btn">
					加入购物车
				</view>
			</view> -->
			<view class="menu" @tap="openCar1">
				<view v-if="goods.tg != 2" class="menu_btn m_btn2">
					立即购买
				</view>
				<view v-if="goods.tg == 2 && !goods.tg_data.tg_num" class="menu_btn m_btn2">
					立即开团
				</view>
				<view v-if="goods.tg == 2 && goods.tg_data.tg_num" class="menu_btn m_btn2">
					立即参团
				</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="show_box" v-if="pupu_show" @tap="openCar">
			<view class="pupu_box" @tap.stop="">
				<view class="goods_box">
					<image v-if="tt && selectSku.pic" class="bg01" :src="selectSku.pic" mode=""></image>
							<image v-else class="bg01" :src="goods.image" mode=""></image>
					<view class="title">{{ goods.name }}</view>
					<block v-if="tt">
						<view class="num">库存{{ selectSku.stock }}</view>
						<view class="money">价格{{selectSku.price }}</view>
					</block>
					<block v-else>
						<view class="num">库存{{ goods.stock }}</view>
				
						<view class="money" v-if='goods.pay_type==1'>￥{{ goods.price }}</view>
							<!-- <view class="money" v-if='goods.pay_type==2'>￥{{ goods.price }}+助农劵</view> -->
								<view class="money" v-if='goods.pay_type==2'>积分：{{ goods.price}}</view>
					</block>
					<view class="close iconfont22" @tap="openCar">&#xe603;</view>
				</view>

				<view class="norms_box">
					<block v-if="goods.sku.attrs != null" v-for="(sku,i) in goods.sku.attrs" :key="'goods_' + i">
						<view class="title">{{ sku.name }}</view>
						<scroll-view :scroll-y="true" class="fixw">
							<view class="menu_box" :scroll-y="true">
								<block v-for="(item, index) in sku.values" :key="index">
									<view class="menu" :data-aname="sku.name" :data-akey="item.value"
										:class="item.check?'selected':''" @tap="optionSku">{{ item.value }}</view>
								</block>
							</view>
						</scroll-view>
					</block>
				</view>

				<view class="number_box">
					<view class="text">选择数量:</view>
					<view class="num_box">
						<view class="symbol iconfont" @tap="subNumber">-</view>
						<view class="num">{{num}}</view>
						<view class="symbol iconfont" @tap="addNumber">+</view>
					</view>
				</view>
				<view class="define" @tap="go()">确定</view>
			</view>
		</view>

		<view class="show_box" v-if="pupu_show1" @tap="openCar1">
			<view class="pupu_box" @tap.stop="">
				<view class="goods_box">
					<image v-if="tt && selectSku.pic" class="bg01" :src="selectSku.pic" mode=""></image>
							<image v-else class="bg01" :src="goods.image" mode=""></image>
					<view class="title">{{ goods.name }}</view>
					<block v-if="tt">
						<view class="num">库存：{{ selectSku.stock }}</view>
						<view class="money">价格：{{selectSku.price }}</view>
					</block>
					<block v-else>
						<view class="num">库存：{{ goods.stock }}</view>
				
					<view class="money" v-if='goods.pay_type==1'>￥{{ goods.price }}</view>
						<view class="money" v-if='goods.pay_type==2'>积分：{{ goods.price }}</view>
							<view class="money" v-if='goods.pay_type==3'>积分：{{ goods.pay_znb}}</view>
					</block>
					<view class="close  iconfont22" @tap="openCar1">&#xe603;</view>
				</view>

				<view class="norms_box">
					<block v-if="goods.sku.attrs != null" v-for="(sku,i) in goods.sku.attrs" :key="'goods_' + i">
						<view class="title">{{ sku.name }}</view>
						<scroll-view :scroll-y="true" class="fixw">
							<view class="menu_box" :scroll-y="true">
								<block v-for="(item, index) in sku.values" :key="index" >
									<view class="menu" :data-aname="sku.name" :data-akey="item.value"
										:class="item.check?'selected':''" @tap="optionSku">{{ item.value }}</view>
								</block>
							</view>
						</scroll-view>
					</block>
				</view>

				<view class="number_box">
					<view class="text">选择数量:</view>
					<view class="num_box">
						<view class="symbol iconfont" @tap="subNumber">-</view>
						<view class="num">{{num}}</view>
						<view class="symbol iconfont" @tap="addNumber">+</view>
					</view>
				</view>
				<view class="define" @tap="go1()">确定</view>
			</view>
		</view>
		<!-- 分享 -->

		<!-- 	<view class="share_bg" v-show="!off" @click.stop="declick">
			<view class="share_box" :animation="animationData" v-show="heard">
				<view class="share" @tap.stop="">
					<view class="menu" @tap="keepImg">
						<image src="../../static/wx03.png" mode="widthFix"></image>
						<view class="text">分享图片</view>
					</view>
					<view class="menu">
						<image style="width: 45px;" src="../../static/wx.png" mode="widthFix"></image>
						<view class="text">微信好友</view>
					</view>
					<view class="menu">
						<image src="../../static/wx02.png" mode="widthFix"></image>
						<view class="text">朋友圈</view>
					</view>
				</view>
				<view class="close iconfont" @click="declick">&#xe658;</view>
			</view>
		</view>
		 -->


		<view class="maskBox" v-if="maskShow && !agree">
			<view class="mask_b">
				<view class="maskMain">
					<view class="m_title">
						<view class="m_t_txt">{{title}}</view>
						<view class="iconfont m_t_icon" @click="noticeChange(false)">&#xe603;</view>
					</view>
					<view class="m_con">
						<view class="m_txt" v-html="content"></view>
						<view class="m_btn_item">
							<view class="m_btn" @click="noticeChange(false,true)">阅读并同意</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	// #ifdef APP-PLUS
	const mqModule = uni.requireNativePlugin("MeiQia-ChatPlugin");
	let chat = '';
	// #endif
	export default {
		data() {

			return {
				url: this.Cfg.Setting.img,
				integral: false,
				collect: false,
				
				tt: false,
				
				keepimg: false,
				animationData: {},
				off: true,
				heard: true,
				//选择的SKU属性
				selectAttr: [],
				//SKU对应的项
				selectSku: {},
				num: 1,
				pupu_show: false,
				pupu_show1: false,
				select: 0,
				info: [{
						url: '../../static/cp01.png',
						content: '内容 A'
					},
					{
						url: '../../static/cp01.png',
						content: '内容 B'
					},
					{
						url: '../../static/cp01.png',
						content: '内容 C'
					}
				],
				strings: '',
				phone: 0,
				tj: '',
				goods: {
					goods_img: '../../static/cp01.png',
					title: '这里是标题这里是标题这里是标题这里是标题这里是标题',
					num: '1230',
					money: '666',
					norms: [
						{
							t: '颜色',
							m: [{
									text: '红色'
								},
								{
									text: '白色'
								},
								{
									text: '蓝色'
								},
								{
									text: '绿色'
								},
								{
									text: '红色'
								},
								{
									text: '白色'
								},
								{
									text: '蓝色'
								},
								{
									text: '绿色'
								}
							]
						}
					]
				},
				maskShow:false,   //控制弹窗
				agree:true,     //是否同意
				title:'',
				content:''
			};
		},
		
		onLoad(options) {
			
		
			var that = this;
		
			that.loadData(options.id)
			that.id = options.id
			that.Net._get('phone', {}, (res) => {
				if (res.code == 1) {
					that.phone = res.data.phone

				}
			});
			// that.Net._get('user_tj', {}, (res) => {
			// 	if (res.code == 1) {
			// 		that.tj = res.data.tj_code
			// 		console.log("/pages/goods/goods?usid="+this.tj+'&id='+this.id)
			// 	}
				
			// });
			if (options.usid) {
				uni.setStorageSync('tj', options.usid);
			}
			// #ifdef APP-PLUS
			mqModule.initChatViewManger();
			// #endif
		},
		onShow() {
			// #ifdef APP-PLUS
			let me = this;
			mqModule.initChatViewManger();
			chat = setInterval(function(){
				mqModule.getUnreadMessages((res)=>{
					//console.log(res)
					me.chat_unread_num = res.length;
				}); 
			},5000)
			// #endif
		},
		onUnload(){
			// #ifdef APP-PLUS
			mqModule.initChatViewManger();
			mqModule.dismiss();
			clearInterval(chat);
			// #endif
		},
		onShareAppMessage(res) {
			console.log('分享', res);
		
			return {
				title: '汉家承',
				path: "/pages/goods/goods?usid="+this.tj+'&id='+this.id,
				imageUrl: '',
				desc: '',
				content: '',
				success(res) {
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		onShareTimeline(res) {
			console.log('分享', res);
		
			return {
				title: '汉家承',
				path: "/pages/goods/goods?usid="+this.tj+'&id'+this.id,
				imageUrl: '',
				desc: ' ',
				content: ' ',
				success(res) {
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		filters: {

		},

		methods: {
			openMeiQiaChatView() {
				mqModule.initChatViewManger();
				let that = this;
				//console.log( that.name.username,that.name.phone)
				this.chat_unread_num = 0;
				mqModule.showMeiQiaChatView();
			},
			noticeChange(flag,_agree=false){
				this.maskShow = flag;
				if(_agree){
					this.agree = true;   //点击同意了
				}
			},
			go() {
			if(!this.agree){
				this.maskShow = true;
				return
			}
				var that = this;
				var sku = '';

				for (var i = 0; i < that.selectAttr.length; i++) {
					sku = sku + that.selectAttr[i].value
					if (i < that.selectAttr.length - 1) {
						sku = sku + ';'
					}
				}
				console.log(sku)
				that.Net._get('addCart', {
					id: that.id,
					sku: sku,
					num: that.num
				}, (res) => {
					console.log(res.data.success)
					if (res.data.success) {
						that.Msg.Success('已加入', (res) => {
							// uni.navigateBack({url:'/pages/addresslist/addresslist',type:2})
						})
					} else {
						that.Msg.Fail(res.data.msg, (res) => {
							// uni.navigateBack({url:'/pages/addresslist/addresslist',type:2})
						})
					}
				});
			},
			go1() {
				if(!this.agree){
					this.maskShow = true;
					return
				}
				
				var that = this;
				var sku = '';

				for (var i = 0; i < that.selectAttr.length; i++) {
					sku = sku + that.selectAttr[i].value
					if (i < that.selectAttr.length - 1) {
						sku = sku + ';'
					}
				}
				//console.log(sku)
				that.Net._get('addCart1', {
					id: that.id,
					sku: sku,
					num: that.num
				}, (res) => {
					console.log(res.data.success)
					if (res.data.success) {
						uni.navigateTo({
							url: '/pages/car/details1?type='+that.goods.type+'&ck=9',
						});
					} else {
						that.Msg.Fail(res.data.msg, (res) => {
							// uni.navigateBack({url:'/pages/addresslist/addresslist',type:2})
						})
					}
				});
			},
			loadData(id) {
				let me = this;
				me.Net._get('goods', {
					goods_id: id
				}, res => {
				
					if (res.data.sku.type == 'many') {
						let sku = res.data.sku.sku;
						let y = [];
						sku.forEach(i => {
							i.selected = false;
							y.push(i);
						})
						res.data.sku.sku = y;
						res.data.sku.sku[0].selected = true;
						me.tt = true
					}
					me.goods = res.data;
					if(res.data.tc)
					{
						me.agree=false;
						me.title=res.data.tc.title
						me.content=res.data.tc.content
					}
					this.collect = res.data.collect;
					let b = res.data.sku.sku[0];
					let a = me.sku2attr(b);
					me.selectAttr = a;
					me.selectSku = b;
					
					
					//console.log(me.content)
				});
			},
			showSpecWindow() {
				if (this.multi == 0) return;
				this.showSpec = !this.showSpec;
			},
			showSpecWindow1() {
				if (this.multi == 0) return;
				this.showSpec1 = !this.showSpec1;
			},
			setMenuColor(index_) {
				this.select = index_;
			},
			//attr转成sku
			attr2sku(attr) {
				let me = this;
				let sku_attr = me.goods.sku.ksort;
				let jb = [];
				sku_attr.forEach((name) => {
					attr.forEach((ak, i) => {
						if (ak.name == name) jb.push(ak.value);
					})
				})
				let eg = jb.join(';')
				console.log(sku_attr)
				let sku = me.goods.sku.sku;
				let sb = {};
				sku.forEach((sk, k) => {

					if (sk.sku_dkr == eg) {
						sb = sk;
					}
				})

				return sb;
			},
			//SKU转成attr		
			sku2attr(sku) {
				let me = this;
				let sku_attr = me.goods.sku.attrs;
				let attr = [];
				sku_attr.forEach((item, index) => {
					attr.push({
						name: item.name,
						value: sku[item.name]
					});
				});
				return attr;
			},
			optionSku(e) {
				let me = this;
				let aname = me.Cfg.getAttr('aname', e);
				let akey = me.Cfg.getAttr('akey', e);
				let slist = me.selectAttr;
				let sb = [];
				slist.forEach(re => {
					if (re.name == aname) re.value = akey;
					sb.push(re);
				})

				me.selectAttr = sb;
				me.selectSku = me.attr2sku(sb);
				//console.log(me.selectAttr)
				me.sku2check(aname, akey);

			},
			sku2check(name, val) {
				let me = this;
				let sku_attr = me.goods.sku.attrs;
				let na = [];
				sku_attr.forEach((item) => {
					if (item.name == name) {
						let v = item.values;
						let nv = [];
						v.forEach((ak) => {
							if (ak.value == val) ak.check = true;
							else ak.check = false;
							nv.push(ak);
						})
						item.values = nv;
					}
					na.push(item);
				})

				me.goods.sku.attrs = na;
			},




			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			setMenuColor(index_) {
				this.select = index_;
			},
			openPreviewImage() {
				uni.previewImage({
					urls: ['http://lili.fz37.com/upload/Cp/202006/11153249155edf3b927bdb5.jpg'],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			openPhone() {
				var that = this
				uni.showModal({
					title: '客服热线',
					content: that.phone,
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							uni.makePhoneCall({
								phoneNumber: that.phone //仅为示例
							});
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			setContentMenu(list, index) {
				list.forEach(item => {
					this.$set(item, 'selected', false);
				});
				this.$set(list[index], 'selected', true);
			},
			subNumber: function() {
				var this_ = this;
				if (this_.num < 2) {
					return false;
				} else {
					this_.num = this_.num - 1;
				}
			},
			addNumber: function() {
				var this_ = this;
				if(this_.goods.type!=99)
				{
					this_.Msg.Fail('仓位一次只能买一个',(res)=>{
					
					})
				
					return
				}
		
				this_.num = this_.num + 1;
			},
			openCar() {
				this.pupu_show = !this.pupu_show;
			},
			openCar1() {
				// if(!this.agree){
				// 	this.maskShow = true;
				// 	return
				// }
				this.pupu_show1 = !this.pupu_show1;
			},
			backPage() {
				uni.navigateBack();
			},
			setCollect() {
				var that = this;
				that.Net._get('collect', {
					id: that.goods.goods_id,
					name: that.goods.name,
					image: that.goods.image,
					price: that.goods.price
				}, (res) => {

				});
				this.collect = !this.collect;
			},
			declick() {
				if (this.off) {
					// 使用动画
					this.showpupu();
				} else {
					this.closepupu();
				}
				this.off = !this.off;
			},
			showpupu() {
				this.animation
					.height()
					.opacity(1)
					.step();
				// 导出动画数据传递给data层
				this.animationData = this.animation.export();
			},
			closepupu() {
				this.animation
					.height(0)
					.opacity(0)
					.step();
				// 导出动画数据传递给data层
				this.animationData = this.animation.export();
			},
			keepImg() {
				// uni.downloadFile({
				// 	url: res.data, //网络路径，下载下来
				// 	success: res1 => {
				// 		if (res1.statusCode === 200) {
				// 			uni.saveImageToPhotosAlbum({
				// 				filePath: res.data,
				// 				success: res2 => {
				// 					//下载完成后在相册里压根找不到
				// 				}
				// 			});
				// 		}
				// 	}
				// });

				// this.declick();
				this.off = true;
				this.keepimg = !this.keepimg;
			},
			closeKeep() {
				this.keepimg = !this.keepimg;
			},



		}
	};
</script>

<style lang="scss">
	page{
		padding-bottom: 15vw;
		background-color: #f8f8f8;
	}
	.content_box1 {
		width: 100%;
		background-color: #fff;
		position: relative;
		z-index: 1;
		padding: 15rpx 20rpx !important;
	}
	.content_box1 img {
		width: 100% !important;
		height: auto !important;
	}
	.content_box1 image {
		width: 100% !important;
	}

	.content_box1 p img {
		width: 100% !important;
		height: auto !important;
	}
	.content_box1 p image {
		width: 100% !important;
		height: auto !important;
	}
	.show_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 10;

		.pupu_box {
			width: 100%;
			position: fixed;
			bottom: 0;
			background-color: #fff;

			.goods_box {
				width: 100%;
				height: 100px;
				position: relative;
				font-size: 4vw;

				.bg01 {
					width: 80px;
					height: 80px;
					position: absolute;
					left: 10px;
					top: 10px;
				}

				.title {
					color: #333;
					position: absolute;
					left: 100px;
					top: 15px;
					width: calc(100% - 160px);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.num {
					color: #999;
					position: absolute;
					left: 100px;
					top: 40px;
					width: calc(100% - 160px);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.money {
					color: #ff3744;
					position: absolute;
					left: 100px;
					bottom: 15px;
					width: calc(100% - 160px);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.close {
					font-size: 10px;
					color: #c2c2c2;
					position: absolute;
					right: 10px;
					top: 15px;
					width: 24px;
					text-align: center;
					height: 24px;
					line-height: 24px;
					border: 2px solid #c2c2c2;
					border-radius: 50%;
				}

			}

			.norms_box {
				width: 100%;
				border-bottom: 1px solid #c2c2c2;

				.title {
					width: 100%;
					height: 30px;
					line-height: 30px;
					font-size: 4vw;
					color: #333;
					text-indent: 10px;
				}

				.fixw {
					max-height: 200px !important;
					overflow: hidden;

					.menu_box {
						padding: 5px 10px;
						display: grid;
						grid-template-columns: auto auto auto;
						flex-wrap: wrap;
						max-height: 100px;

						.menu {
							padding: 8px 5px;
							margin-bottom: 10px;
							border-radius: 4px;
							border: 1px solid #c2c2c2;
							font-size: 3vw;
							color: #c2c2c2;
							margin-right: 10px;
							flex: 1;
							display: flex;
							justify-content: center;
							align-items: center;

							&.selected {
								background-color: #ff3744 !important;
								color: #fff !important;
								border: 1px solid #ff3744 !important;
							}
						}
					}
				}
			}

			.number_box {
				width: 100%;
				height: 50px;
				position: relative;

				.text {
					font-size: 12px;
					color: #333;
					line-height: 50px;
					position: absolute;
					left: 10px;
				}

				.num_box {
					position: absolute;
					right: 10px;
					bottom: 14px;
					width: 90px;
					height: 23px;
					display: flex;
					border: 1px solid #c2c2c2;

					.symbol {
						width: 23px;
						height: 23px;
						line-height: 23px;
						font-size: 13px;
						color: 333;
						text-align: center;
						color: #333;

						&:nth-child(1) {
							border-right: 1px solid #c2c2c2;
						}

						&:nth-child(3) {
							border-left: 1px solid #c2c2c2;
						}

					}

					.num {
						width: calc(100% - 46px);
						height: 23px;
						line-height: 23px;
						font-size: 14px;
						color: 333;
						text-align: center;
					}
				}
			}

			.define {
				width: 60%;
				margin: 0 auto;
				height: 13.5vw;
				line-height: 13.5vw;
				border-radius: 13.5vw;
				text-align: center;
				color: #fff;
				font-size: 12px;
				background-color: #ff3744;
				margin-bottom: 3vw;
			}
		}
	}

	.header {
		width: 100%;
		height: 50px;
		display: flex;
		position: fixed;
		top: calc(10px + var(--status-bar-height));
		/* background-color: #ffdb4e; */
		z-index: 9;
	}

	.header .back {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		line-height: 38px;
		text-align: center;
		font-size: 14px;
		color: #fff;
		background-color: #999;
		position: absolute;
		left: 15px;
	}

	.header .share {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		line-height: 38px;
		text-align: center;
		font-size: 24px;
		color: #fff;
		background-color: #999;
		position: absolute;
		right: 15px;
	}

	.header .location_box {
		height: 50px;
		width: 70px;
		display: flex;
		margin-right: 10px;
	}

	.header .location_box .location {
		font-size: 14px;
		color: #333;
		line-height: 50px;
		margin-right: 5px;
		margin-left: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header .location_box .arrow {
		font-size: 10px;
		color: #666;
		line-height: 50px;
	}

	.header .search {
		width: calc(100% - 40px);
		height: 30px;
		margin-top: 10px;
		display: flex;
		background-color: #fff;
		border-radius: 30px;
	}

	.header .search .icon {
		font-size: 14px;
		color: #666;
		line-height: 30px;
		margin-left: 10px;
	}

	.header .search input {
		font-size: 12px;
		color: #333;
		height: 30px;
		line-height: 30px;
		margin-left: 10px;
	}

	.header .more {
		width: 30px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		color: #333;
	}

	.swiper_box {
		width: 100%;
		height: 350px;
		position: relative;
		box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
	}

	.swiper_box .num_box {
		width: 40px;
		height: 20px;
		border-radius: 30px;
		background-color: #999;
		text-align: center;
		line-height: 20px;
		font-size: 12px;
		position: absolute;
		right: 15px;
		bottom: 10px;
		z-index: 99;
		color: #fff;
		letter-spacing: 2px;
	}

	.swiper_box image {
		width: 100%;
		height: 100%;
	}

	.money_box {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-indent: 15px;
		color: #f80000;
		background-color: #fff;
		font-size: 4.3vw;
		font-weight: bold;
		position: relative;
		display: flex;
		justify-content: flex-start;
	}

	.money_box .y_money {
		font-size: 10px;
		color: #999;
		margin-left: 5px;
		position: relative;
		text-indent: 0;
		font-weight: 200;
		line-height: 42px;
	}

	.money_box .y_money .line {
		width: 100%;
		height: 1px;
		background-color: #999;
		position: absolute;
		left: 0;
		top: calc(54% - 0.5px);
	}

	.title_box {
		width: 100%;
		padding: 30rpx 15px 0;
		font-size: 33rpx;
		color: #333;
		font-weight: bold;
		background-color: #fff;
	}
	.title_box2 {
		color: #787878;
		font-size: 29rpx;
		font-weight: 500;
		padding-top: 6rpx;
	}

	.coupon_box {
		width: 100%;
		height: 35px;
		display: flex;
		background-color: #fff;
		position: relative;
	}

	.coupon_box .text {
		width: 100%;
		text-indent: 15px;
		line-height: 34px;
		color: #666;
		font-size: 12px;
	}

	.coupon_box .state {
		padding: 3px 5px;
		color: #fff;
		font-size: 10px;
		background-color: #ff3744;
		position: absolute;
		left: 50px;
		top: 14px;
	}

	.coupon_box .arrow {
		font-size: 14px;
		color: #999;
		line-height: 50px;
		position: absolute;
		right: 15px;
	}

	.message_box {
		width: 100%;
		padding: 15rpx 0;
		display: flex;
		background-color: #fff;
		margin-top: 20rpx;
	}
	.message:not(:first-child){
		border-left: 1rpx solid #cacaca;
	}

	.message_box .message {
		width: 33%;
		font-size: 14px;
		color: #999;
	}

	.message_box .message:nth-child(1) {
		text-align: left;
		margin-left: 15px;
		width: calc(25% -15px);
	}

	.message_box .message:nth-child(2) {
		text-align: center;
	}

	.message_box .message:nth-child(3) {
		text-align: right;
		margin-right: 15px;
		width: calc(33% - 15px);
	}

.message_box .message:nth-child(4) {
		text-align: right;
		margin-right: 15px;
		width: calc(25% - 15px);
	}
	
	.message_box2{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.message_box2 .m2_txt1{
		color: #FFFFFF;
		padding: 5rpx 15rpx;
		background: #ff0202;
		font-size: 28rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}
	.message_box2 .m2_txt2{
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #eb4c0c;
	}
	.message_box2 .m2_txt3{
		flex: 1;
		margin-left: 40rpx;
		text-align: right;
		font-size: 30rpx;
		background: #eb4c0c;
		padding: 5rpx 20rpx 5rpx 10rpx;
		color: #f4f4f4;
	}
	.content_title{
		width: 100%;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 30rpx;
		color: #909090;
		font-size: 30rpx;
		position: relative;
	}
	.content_title .con_tit_txt{
		position: relative;
		z-index: 3;
		padding: 0 30rpx;
		background: #F8F8F8;
	}
	.content_title::after{
		content: '';
		position: absolute;
		min-width: 50%;
		left: 25%;
		height: 1rpx;
		top: 50%;
		z-index: 2;
		background: #c2c2c2;
	}
	.content_box {
		width: 100%;
		margin-top: 20rpx;
		padding: 15rpx 20rpx;
		background: #ffffff;
		position: relative;
		z-index: 1;
	}

	.fwb {
		width: 100% !important;
	}

	.content_list {
		width: 100%;

		display: flex;
	}

	.content_list .round_box {
		width: 26px;
		height: 100%;
	}

	.content_list .round_box .line {
		width: 1px;
		height: calc(100% - 10px);
		border-right: 1px dashed #b3b3b3;
		margin: 0 auto;
	}

	.content_list .round_box .round {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #e6e6e6;
		margin: 0 auto;
		position: relative;
	}

	.content_list .round_box .round .r {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #c4c4c4;
		position: absolute;
		left: calc(50% - 2.5px);
		top: calc(50% - 2.5px);
	}

	.content_list .list_box {
		width: calc(100%);
		height: 100%;
		position: relative;
	}

	.content_list .list_box .line {
		width: 1px;
		height: calc(100% - 10px);
		border-right: 1px dashed #b3b3b3;
		position: absolute;
		top: 10px;
		left: -13.5px;
	}

	.content_list .list_box .man_box {
		width: 100%;
		height: 40px;
		position: relative;
		background-color: #fff;
		border-radius: 6px 0 0 0;
	}

	.content_list .list_box .man_box .portrait {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		position: absolute;
		left: 5px;
		top: 5px;
	}

	.content_list .list_box .man_box .portrait image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.content_list .list_box .man_box .name {
		font-size: 12px;
		color: #202020;
		position: absolute;
		left: 40px;
		top: 5px;
	}

	.content_list .list_box .man_box .time {
		font-size: 10px;
		color: #999;
		position: absolute;
		left: 40px;
		bottom: 5px;
	}

	.content_list .list_box .man_box .stars_box {
		position: absolute;
		right: 10px;
		top: 10px;
		display: flex;
		height: 20px;
	}

	.content_list .list_box .man_box .stars_box .star {
		line-height: 20px;
		color: #bdbdbd;
		font-size: 10px;
		margin-left: 2px;
	}

	.content_list .list_box .man_box .stars_box .star02 {
		line-height: 20px;
		color: #FFDB4E;
		font-size: 10px;
		margin-left: 2px;
	}

	.content_list .list_box .text_box {
		background-color: #fff;
		font-size: 13px;
		color: #333;
		line-height: 20px;
		padding: 0px 10px 10px 10px;
		/* border-radius: 0 0 0 6px; */
	}

	.content_list .list_box .goods_img {
		width: 100%;
		background-color: #fff;
		padding: 0px 10px 5px 10px;
		border-radius: 0 0 0 6px;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.content_list .list_box .goods_img::after {
		flex: auto;
		content: '';
	}

	.content_list .list_box .goods_img image {
		width: 30%;
		height: 110px;
		margin-left: 2.5%;
		flex-basis: auto;
	}

	.footer {
		width: 100%;
		height: 50px;
		display: flex;
		position: fixed;
		z-index: 9;
		bottom: 0;
		padding-right: 4%;
		background: #FFFFFF;
		border-top: 1rpx solid #f0f0f0;
	}

	.footer .menu {
		//width: 33%;
		flex: 1;
		height: 50px;
		display: flex;
		justify-content: flex-end;
	}

	.footer .menu:nth-child(1) {
		background-color: #fff;
		display: flex;
	}
	.footer .menu .menu_btn{
		width: 80%;
		height: 40px;
		margin-top: 5px;
		line-height: 40px;
		text-align: center;
		border-radius: 50rpx;
		background: #4d726f;
	}
	.footer .menu .m_btn2{
		background: #f80000;
	}
	.footer .menu:nth-child(2) {
		background-color: #FFFFFF;
		color: #fff;
		text-align: center;
	}

	.footer .menu:nth-child(3) {
		width: calc(100% - 66%);
		background-color: #FFFFFF;
		color: #fff;
		text-align: center;
	}

	.footer .menu .bt {
		width: 50%;
		height: 100%;
	}

	.footer .menu .bt:nth-child(1) {
		box-sizing: border-box;
		border-right: 1px solid #e8e8e8;
	}

	.footer .menu .bt .icon {
		width: 100%;
		text-align: center;
		font-size: 6vw;
		color: #333;
		margin-top: 1vw;
	}

 

	.footer .menu .bt .text {
		width: 100%;
		text-align: center;
		font-size: 3vw;
		color: #333;
	
	}

	.footer .menu .bt:nth-child(1) .icon {
		color: #999;
	}

	.footer .menu .bt:nth-child(1) .text {
		color: #999;
	}

	.collectcolor {
		color: #f80000 !important;
	}







	.mode_box {
		width: 100%;
		height: 40px;
		position: relative;
		background-color: #fff;
		display: flex;
	}

	.mode_box .text {
		font-size: 12px;
		color: #333;
		position: absolute;
		left: 15px;
		line-height: 40px;
	}

	.mode_box .arrow {
		font-size: 14px;
		color: #999;
		position: absolute;
		right: 15px;
		line-height: 40px;
	}

	.mode_box .state_box {
		display: flex;
		width: 100%;
	}

	.mode_box .state_box .state {
		display: flex;
		margin-left: 3%;
	}

	.mode_box .state_box .state .icon {
		line-height: 16px;
		color: green;
		font-size: 12px;
		width: 16px;
		height: 16px;
		border: 1px solid green;
		text-align: center;
		margin-top: 12px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.mode_box .state_box .state .text03 {
		line-height: 40px;
		color: #4d726f;
		font-size: 12px;
	}


	.share_bg {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.share_box {
		width: 100%;
		height: 124px;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		opacity: 0;
	}

	.share_box .share {
		/* width: 100%; */
		height: 60px;
		display: flex;
		justify-content: center;
		margin: 30px 16px 16px 16px;
	}

	.share_box .share .menu {
		width: 50px;
		height: 60px;
		text-align: center;
		/* margin-right: 30px; */
	}

	.share_box .share .menu:nth-child(2) {
		margin: 0 50px;
	}

	.share_box .share .menu image {
		width: 43px;
	}

	.share_box .share .menu .text {
		font-size: 12px;
		color: #333;
		text-align: center;
		line-height: 20px;
	}

	.share_box .close {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 22px;
		color: #5a5a5a;
	}


	.show_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.show_box .pupu_box {
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: #fff;
		padding: 40rpx 0 20rpx;
	}

	.show_box .pupu_box .goods_box {
		width: 100%;
		height: 100px;
		position: relative;
	}

	.show_box .pupu_box .goods_box .bg01 {
		width: 80px;
		height: 80px;
		position: absolute;
		border-radius: 20rpx;
		left: 10px;
		top: 10px;
	}

	.show_box .pupu_box .goods_box .title {
		font-size: 14px;
		color: #333;
		position: absolute;
		left: 100px;
		top: 15px;
		width: calc(100% - 160px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.show_box .pupu_box .goods_box .num {
		font-size: 14px;
		color: #333;
		position: absolute;
		left: 100px;
		top: 40px;
		width: calc(100% - 160px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.show_box .pupu_box .goods_box .money {
		font-size: 15px;
		color: #ff3744;
		position: absolute;
		left: 100px;
		bottom: 15px;
		width: calc(100% - 160px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.show_box .pupu_box .goods_box .close {
		font-size: 14px;
		font-weight: bold;
		color: #585858;
		position: absolute;
		right: 13px;
		top: -5px;
		width: 24px;
		text-align: center;
		height: 24px;
		line-height: 20px;
		border: 2px solid #585858;
		border-radius: 50%;
	}

	.show_box .pupu_box .norms_box {
		width: 100%;
		border-bottom: 1px solid #f5f5f5;
	}

	.show_box .pupu_box .norms_box .title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		color: #333;
		text-indent: 10px;
	}

	.show_box .pupu_box .norms_box .menu_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.show_box .pupu_box .norms_box .menu_box::after {
		flex: auto;
		content: '';
	}

	.show_box .pupu_box .norms_box .menu_box .menu {
		padding: 7px 18px;
		border: 1px solid #f5f5f5;
		background-color: #f5f5f5;
		box-sizing: border-box;
		flex-basis: auto;
		margin-bottom: 2%;
		margin-left: 2%;
		font-size: 10px;
		color: #333;
		text-align: center;
		border-radius: 15.5px;
	}

	.selected {
		background-color: #FFD9DE !important;
		color: #fd4a4f !important;
		border: 1px solid #fd4a4f !important;
	}

	.show_box .pupu_box .number_box {
		width: 100%;
		height: 50px;
		position: relative;
	}

	.show_box .pupu_box .number_box .text {
		font-size: 15px;
		color: #333;
		line-height: 50px;
		position: absolute;
		left: 10px;
		display: flex
	}

	.show_box .pupu_box .number_box .text .n {
		color: #F72F4B;
		margin-left: 10px;
	}

	.show_box .pupu_box .number_box .num_box {
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: 90px;
		height: 28px;
		display: flex;
		background-color: #f5f5f5;
		border-radius: 28px;
	}

	.show_box .pupu_box .number_box .num_box .symbol {
		width: 28px;
		height: 27px;
		line-height: 23px;
		font-size: 3.5vw;
		color: #333;
		text-align: center;
	}

	.show_box .pupu_box .number_box .num_box .symbol:nth-child(1) {
		border-right: 1px solid #c2c2c2;
		font-size: 5vw;
		color: #333;
	}

	.show_box .pupu_box .number_box .num_box .symbol:nth-child(3) {
		border-left: 1px solid #c2c2c2;
		font-size: 5vw;
		color: #333;
	}

	.show_box .pupu_box .number_box .num_box .num {
		width: calc(100% - 56px);
		height: 23px;
		line-height: 23px;
		font-size: 14px;
		color: 333;
		text-align: center;
	}

	.show_box .pupu_box .define {
		width: 94%;
		margin: 0 auto;
		height: 12vw;
		line-height: 12vw;
		border-radius: 12vw;
		margin-bottom: 3vw;
		text-align: center;
		color: #fff;
		font-size: 18px;
		background-color: #f80000;
	}
	.btn1::after {
	   border: 0 !important;
	   padding: 0 !important;
	}
	
.maskBox{
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	box-sizing: border-box;
}
.maskBox *{
	box-sizing: border-box;
}
.maskBox .mask_b{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.maskBox .mask_b .maskMain{
	width: 86%;
	background: #ffffff;
	border-radius: 8rpx;
	margin-top: 20vh;
}
.maskMain .m_title{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #dadada;
}
.maskMain .m_title .m_t_txt{
	flex: 1;
	padding-left: 20rpx;
	font-size: 35rpx;
}
.maskMain .m_title .m_t_icon{
	font-size: 40rpx;
	padding-right: 20rpx;
	color: #999999;
}
.maskMain .m_con{
	width: 100%;
	padding: 40rpx 30rpx;
}
.maskMain .m_con .m_txt{
	width: 100%;
	height: 30vh;
	overflow: hidden;
	overflow-y: auto;
	font-size: 28rpx;
	color: #606266;
	line-height: 50rpx;
}
.maskMain .m_con .m_btn_item{
	margin-top: 30rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.maskMain .m_con .m_btn_item .m_btn{
	padding: 0 40rpx;
	height: 70rpx;
	border-radius: 40rpx;
	color: #ffffff;
	font-size: 30rpx;
	text-align: center;
	background: #4d726f;
	line-height: 70rpx;
}
</style>
